:root {
  --bgColor: #f0f3f6;
}

* {padding: 0; margin: 0; font: inherit; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
}
html, body {height: 100%; overflow: hidden;}
body {font-size: 14px;}
ul, li {list-style: none; margin: 0;}
a:link,
a:hover,
a:active,
a:focus,
a:visited,
a {color: inherit; text-decoration: none;}
strong, .bold {font-weight: bold;}

.f16 {font-size: 16px;}
.f18 {font-size: 18px;}

.btn + .btn {margin-left: .6em;}
[class^="bi-"] + *,
.glyphicon + * {margin-left: .3em;}
.glyphicon + .glyphicon {margin-left: .5em;}
.glyphicon {cursor: pointer;}

.glyphicon-exclamation-sign,
.glyphicon-tent,
.glyphicon-remove,
.glyphicon-trash,
.glyphicon-flag,
.glyphicon-list-alt,
.glyphicon-info-sign,
.glyphicon-list,
.glyphicon-send {top: 2px;}

.ant-tooltip {
  max-width: 800px;
  .ant-tooltip-inner {
    .scroll-wrapper {
      max-height: calc(60vh); overflow: auto;
      padding: .75em;
    }
    &:has(.scroll-wrapper) {
      padding: 0;
    }
    overflow: hidden;
    word-break: break-all;
    pre {
      padding: 0; background: transparent;
      border-radius: 0; border: none; color: revert; margin: 0;
      overflow: visible;
      display: inline-block;
    }
  }
}

.c {text-align: center;}
.p {cursor: pointer;}
.fl {float: left;}
.fr {float: right;}
.ib {display: inline-block; position: relative;}
.inner {position: relative;}
.relative {position: relative;}
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.no-select {user-select: none;}
.no-data {color: rgba(100, 100, 100, 1.0); font-weight: bold;}
.space {padding: 1em;}
.space2 {padding: .75em 1em;}
.cxy {display: flex; align-items: center; justify-content: center;}
.cx {display: flex; justify-content: center;}
.cy {display: flex; align-items: center;}

.auto-flex {flex: 1; overflow: auto; position: relative;}
.flex {
  display: flex;
  & > div {
    position: relative;
    &:not(:last-child) {margin-right: 1em;}
  }
}
.flex-h {
  display: flex;
  & > div {
    position: relative;
    &:not(:last-child) {margin-right: 1em;}
  }
}
.flex-v {
  height: 100%; display: flex; flex-direction: column;
  & > div {
    position: relative;
    &:not(:last-child) {
      border-bottom: 1px solid #ddd;
    }
  }
}

.table-data {
  // width: 100%;
  border-collapse: collapse;
  thead, tbody {
    tr {
      th, td {
        border: 1px solid #ddd; padding: 8px;
      }
    }
  }
  thead tr {
    th {
      background: var(--bgColor);
      border-top: none;
      border-bottom: none;
    }
  }
  tbody tr {
    &:nth-of-type(odd) td {background: #fff;}
    &:nth-of-type(even) td {background: var(--bgColor);}
  }

  &.table-fix-head {
    border: none;
    thead {
      position: sticky; left: 0; top: 0; z-index: 3;
      tr {
        th {
          box-shadow: 0 1px 0 #ddd inset, 0 -1px 0 #ddd inset;
          border-bottom: none;
        }
      }
    }
  }
  &.table-fix-r:has(tbody tr td:nth-child(2)) {
    thead, tbody {
      tr {
        th:last-child,
        td:last-child {
          position: sticky; right: 0; z-index: 2;
          &:before {
            content: "";
            width: 10px; height: 100%;
            position: absolute; right: 100%; top: 0;
            background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1));
            pointer-events: none;
          }
        }
      }
    }
    tbody tr th:last-child {z-index: 3}
  }
  thead {
    tr {
      th {font-weight: bold; white-space: nowrap;}
    }
  }
}

.glb {
  background: var(--bgColor);
  border-bottom: 1px solid #ddd;
  padding: .7em 1em; display: flex;
  box-shadow: 0 1px 0 #fff inset;
  & > .auto-flex {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  & > div:not(:last-child) {margin-right: 1.5em;}
}

.title-bar {
  display: flex; margin-bottom: 1.2em;
  & > div + div {margin-left: 1em;}
  .auto-flex {
    padding-left: 1em;
    display: flex; align-items: center;
    &:before {
      content: "";
      width: 5px; height: 20px;
      position: absolute; left: 0; top: 50%;
      transform: translateY(-50%);
      border-radius: 4px;
      background: #09f;
    }
    strong {font-size: 16px;}
  }
}

.list-sec {
  & > section + section {
    margin-top: 2em;
  }
}

#app {height: 100%;}
